Vue.component('com-citychoice', {
	data: function() {
		return {
			boxShow: false,
			isCancel: false,
			zimShow: false,
			ssval: '',
			zimText: '',
			sidabers: ['热门', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'W',
				'X', 'Y', 'Z'
			],
			citys: [{
				city: '南宁',
				py: 'nanning'
			}, {
				city: '桂林',
				py: 'guilin'
			}, {
				city: '百色',
				py: 'baise'
			}, {
				city: '北海',
				py: 'beihai'
			}, {
				city: '崇左',
				py: 'chongzuo'
			}, {
				city: '防城港',
				py: 'fangchenggang'
			}, {
				city: '贵港',
				py: 'guigang'
			}, {
				city: '河池',
				py: 'hechi'
			}, {
				city: '贺州',
				py: 'hezhou'
			}, {
				city: '来宾',
				py: 'laibin'
			}, {
				city: '柳州',
				py: 'liuzhou'
			}, {
				city: '钦州',
				py: 'qinzhou'
			}, {
				city: '梧州',
				py: 'wuzhou'
			}, {
				city: '玉林',
				py: 'yulin'
			}, {
				city: '武鸣县',
				py: 'wumingxian'
			}, {
				city: '隆安县',
				py: 'longanxian'
			}, {
				city: '马山县',
				py: 'mashanxian'
			}, {
				city: '上林县',
				py: 'shanglinxian'
			}, {
				city: '宾阳县',
				py: 'binyangxian'
			}, {
				city: '横县',
				py: 'hengxian'
			}, {
				city: '阳朔县',
				py: 'yangshuoxian'
			}, {
				city: '临桂县',
				py: 'linguixian'
			}, {
				city: '灵川县',
				py: 'lingchuanxian'
			}, {
				city: '全州县',
				py: 'quanzhouxian'
			}, {
				city: '平乐县',
				py: 'pinglexian'
			}, {
				city: '兴安县',
				py: 'xinganxian'
			}, {
				city: '灌阳县',
				py: 'guanyangxian'
			}, {
				city: '荔浦县',
				py: 'lipuxian'
			}, {
				city: '资源县',
				py: 'ziyuanxian'
			}, {
				city: '永福县',
				py: 'yongfuxian'
			}, {
				city: '龙胜',
				py: 'longsheng'
			}, {
				city: '恭城',
				py: 'gongcheng'
			}, {
				city: '凌云县',
				py: 'lingyunxian'
			}, {
				city: '平果县',
				py: 'pingguoxian'
			}, {
				city: '西林县',
				py: 'xilinxian'
			}, {
				city: '乐业县',
				py: 'leyexian'
			}, {
				city: '德保县',
				py: 'debaoxian'
			}, {
				city: '田林县',
				py: 'tianlinxian'
			}, {
				city: '田阳县',
				py: 'tianyangxian'
			}, {
				city: '靖西县',
				py: 'jingxixian'
			}, {
				city: '田东县',
				py: 'tiandongxian'
			}, {
				city: '那坡县',
				py: 'napoxian'
			}, {
				city: '隆林',
				py: 'longlin'
			}, {
				city: '合浦县',
				py: 'hepuxian'
			}, {
				city: '凭祥市',
				py: 'pingxiangshi'
			}, {
				city: '宁明县',
				py: 'ningmingxian'
			}, {
				city: '扶绥县',
				py: 'fusuixian'
			}, {
				city: '龙州县',
				py: 'longzhouxian'
			}, {
				city: '大新县',
				py: 'daxinxian'
			}, {
				city: '天等县',
				py: 'tiandengxian'
			}, {
				city: '东兴市',
				py: 'dongxingshi'
			}, {
				city: '上思县',
				py: 'shangsixian'
			}, {
				city: '桂平市',
				py: 'guipingshi'
			}, {
				city: '平南县',
				py: 'pingnanxian'
			}, {
				city: '宜州市',
				py: 'yizhoushi'
			}, {
				city: '天峨县',
				py: 'tianexian'
			}, {
				city: '凤山县',
				py: 'fengshanxian'
			}, {
				city: '南丹县',
				py: 'nandanxian'
			}, {
				city: '东兰县',
				py: 'donglanxian'
			}, {
				city: '都安',
				py: 'duan'
			}, {
				city: '罗城',
				py: 'luocheng'
			}, {
				city: '巴马',
				py: 'bama'
			}, {
				city: '环江',
				py: 'huanjiang'
			}, {
				city: '大化',
				py: 'dahua'
			}, {
				city: '钟山县',
				py: 'zhongshanxian'
			}, {
				city: '昭平县',
				py: 'zhaopingxian'
			}, {
				city: '富川',
				py: 'fuchuan'
			}, {
				city: '合山市',
				py: 'heshanshi'
			}, {
				city: '象州县',
				py: 'xiangzhouxian'
			}, {
				city: '武宣县',
				py: 'wuxuanxian'
			}, {
				city: '忻城县',
				py: 'xinchengxian'
			}, {
				city: '金秀',
				py: 'jinxiu'
			}, {
				city: '柳江县',
				py: 'liujiangxian'
			}, {
				city: '柳城县',
				py: 'liuchengxian'
			}, {
				city: '鹿寨县',
				py: 'luzhaixian'
			}, {
				city: '融安县',
				py: 'ronganxian'
			}, {
				city: '融水',
				py: 'rongshui'
			}, {
				city: '三江',
				py: 'sanjiang'
			}, {
				city: '灵山县',
				py: 'lingshanxian'
			}, {
				city: '浦北县',
				py: 'pubeixian'
			}, {
				city: '岑溪市',
				py: 'cenxishi'
			}, {
				city: '苍梧县',
				py: 'cangwuxian'
			}, {
				city: '藤县',
				py: 'tengxian'
			}, {
				city: '蒙山县',
				py: 'mengshanxian'
			}, {
				city: '北流市',
				py: 'beiliushi'
			}, {
				city: '容县',
				py: 'rongxian'
			}, {
				city: '陆川县',
				py: 'luchuanxian'
			}, {
				city: '博白县',
				py: 'bobaixian'
			}, {
				city: '兴业县',
				py: 'xingyexian'
			}, {
				city: '深圳',
				py: 'shenzhen'
			}, {
				city: '广州',
				py: 'guangzhou'
			}, , {
				city: '东莞',
				py: 'dongguan'
			}, {
				city: '佛山',
				py: 'foshan'
			}, {
				city: '河源',
				py: 'heyuan'
			}, {
				city: '惠州',
				py: 'huizhou'
			}, {
				city: '江门',
				py: 'jiangmen'
			}, {
				city: '揭阳',
				py: 'jieyang'
			}, {
				city: '茂名',
				py: 'maoming'
			}, {
				city: '梅州',
				py: 'meizhou'
			}, {
				city: '清远',
				py: 'qingyuan'
			}, {
				city: '汕头',
				py: 'shantou'
			}, {
				city: '汕尾',
				py: 'shanwei'
			}, {
				city: '韶关',
				py: 'shaoguan'
			}, {
				city: '阳江',
				py: 'yangjiang'
			}, {
				city: '云浮',
				py: 'yunfu'
			}, {
				city: '肇庆',
				py: 'zhaoqing'
			}, {
				city: '中山',
				py: 'zhongshan'
			}, {
				city: '番禺',
				py: 'panyu'
			}, {
				city: '从化市',
				py: 'conghuashi'
			}, {
				city: '潮安县',
				py: 'chaoanxian'
			}, {
				city: '饶平县',
				py: 'raopingxian'
			}, {
				city: '樟木头',
				py: 'zhangmutou'
			}, {
				city: '东源县',
				py: 'dongyuanxian'
			}, {
				city: '和平县',
				py: 'hepingxian'
			}, {
				city: '连平县',
				py: 'lianpingxian'
			}, {
				city: '龙川县',
				py: 'longchuanxian'
			}, {
				city: '紫金县',
				py: 'zijinxian'
			}, {
				city: '大亚湾',
				py: 'dayawan'
			}, {
				city: '博罗县',
				py: 'boluoxian'
			}, {
				city: '惠东县',
				py: 'huidongxian'
			}, {
				city: '龙门县',
				py: 'longmenxian'
			}, {
				city: '台山市',
				py: 'taishanshi'
			}, {
				city: '开平市',
				py: 'kaipingshi'
			}, {
				city: '鹤山市',
				py: 'heshanshi'
			}, {
				city: '恩平市',
				py: 'enpingshi'
			}, {
				city: '普宁市',
				py: 'puningshi'
			}, {
				city: '揭东县',
				py: 'jiedongxian'
			}, {
				city: '揭西县',
				py: 'jiexixian'
			}, {
				city: '惠来县',
				py: 'huilaixian'
			}, {
				city: '高州市',
				py: 'gaozhoushi'
			}, {
				city: '化州市',
				py: 'huazhoushi'
			}, {
				city: '信宜市',
				py: 'xinyishi'
			}, {
				city: '电白县',
				py: 'dianbaixian'
			}, {
				city: '梅县',
				py: 'meixian'
			}, {
				city: '兴宁市',
				py: 'xingningshi'
			}, {
				city: '大埔县',
				py: 'dabuxian'
			}, {
				city: '丰顺县',
				py: 'fengshunxian'
			}, {
				city: '五华县',
				py: 'wuhuaxian'
			}, {
				city: '平远县',
				py: 'pingyuanxian'
			}, {
				city: '蕉岭县',
				py: 'jiaolingxian'
			}, {
				city: '英德市',
				py: 'yingdeshi'
			}, {
				city: '连州市',
				py: 'lianzhoushi'
			}, {
				city: '佛冈县',
				py: 'fogangxian'
			}, {
				city: '阳山县',
				py: 'yangshanxian'
			}, {
				city: '清新县',
				py: 'qingxinxian'
			}, {
				city: '连山',
				py: 'lianshan'
			}, {
				city: '连南',
				py: 'liannan'
			}, {
				city: '南澳县',
				py: 'nanaoxian'
			}, {
				city: '陆丰市',
				py: 'lufengshi'
			}, {
				city: '海丰县',
				py: 'haifengxian'
			}, {
				city: '陆河县',
				py: 'luhexian'
			}, {
				city: '曲江县',
				py: 'qujiangxian'
			}, {
				city: '乐昌市',
				py: 'lechangshi'
			}, {
				city: '南雄市',
				py: 'nanxiongshi'
			}, {
				city: '始兴县',
				py: 'shixingxian'
			}, {
				city: '仁化县',
				py: 'renhuaxian'
			}, {
				city: '翁源县',
				py: 'wenyuanxian'
			}, {
				city: '新丰县',
				py: 'xinfengxian'
			}, {
				city: '乳源',
				py: 'ruyuan'
			}, {
				city: '阳春市',
				py: 'yangchunshi'
			}, {
				city: '阳西县',
				py: 'yangxixian'
			}, {
				city: '阳东县',
				py: 'yangdongxian'
			}, {
				city: '罗定市',
				py: 'luodingshi'
			}, {
				city: '新兴县',
				py: 'xinxingxian'
			}, {
				city: '郁南县',
				py: 'yunanxian'
			}, {
				city: '云安县',
				py: 'yunanxian'
			}, {
				city: '廉江市',
				py: 'lianjiangshi'
			}, {
				city: '雷州市',
				py: 'leizhoushi'
			}, {
				city: '吴川市',
				py: 'wuchuanshi'
			}, {
				city: '遂溪县',
				py: 'suixixian'
			}, {
				city: '徐闻县',
				py: 'xuwenxian'
			}, {
				city: '肇庆市',
				py: 'zhaoqingshi'
			}, {
				city: '高要市',
				py: 'gaoyaoshi'
			}, {
				city: '四会市',
				py: 'sihuishi'
			}, {
				city: '广宁县',
				py: 'guangningxian'
			}, {
				city: '怀集县',
				py: 'huaijixian'
			}, {
				city: '封开县',
				py: 'fengkaixian'
			}, {
				city: '德庆县',
				py: 'deqingxian'
			}, {
				city: '福州',
				py: 'fuzhou'
			}, {
				city: '龙岩',
				py: 'longyan'
			}, {
				city: '南平',
				py: 'nanping'
			}, {
				city: '宁德',
				py: 'ningde'
			}, {
				city: '莆田',
				py: 'putian'
			}, {
				city: '泉州',
				py: 'quanzhou'
			}, {
				city: '三明',
				py: 'sanming'
			}, {
				city: '厦门',
				py: 'xiamen'
			}, {
				city: '漳州',
				py: 'zhangzhou'
			}, {
				city: '昆明',
				py: 'kunming'
			}, {
				city: '怒江',
				py: 'nujiang'
			}, {
				city: '普洱',
				py: 'puer'
			}, {
				city: '丽江',
				py: 'lijiang'
			}, {
				city: '保山',
				py: 'baoshan'
			}, {
				city: '楚雄',
				py: 'chuxiong'
			}, {
				city: '大理',
				py: 'dali'
			}, {
				city: '德宏',
				py: 'dehong'
			}, {
				city: '迪庆',
				py: 'diqing'
			}, {
				city: '红河',
				py: 'honghe'
			}, {
				city: '临沧',
				py: 'lincang'
			}, {
				city: '曲靖',
				py: 'qujing'
			}, {
				city: '文山',
				py: 'wenshan'
			}, {
				city: '西双版纳',
				py: 'xishuangbanna'
			}, {
				city: '玉溪',
				py: 'yuxi'
			}, {
				city: '昭通',
				py: 'zhaotong'
			}, {
				city: '长沙',
				py: 'changsha'
			}, {
				city: '张家界',
				py: 'zhangjiajie'
			}, {
				city: '常德',
				py: 'changde'
			}, {
				city: '郴州',
				py: 'chenzhou'
			}, {
				city: '衡阳',
				py: 'hengyang'
			}, {
				city: '怀化',
				py: 'huaihua'
			}, {
				city: '娄底',
				py: 'loudi'
			}, {
				city: '邵阳',
				py: 'shaoyang'
			}, {
				city: '湘潭',
				py: 'xiangtan'
			}, {
				city: '湘西',
				py: 'xiangxi'
			}, {
				city: '益阳',
				py: 'yiyang'
			}, {
				city: '永州',
				py: 'yongzhou'
			}, {
				city: '岳阳',
				py: 'yueyang'
			}, {
				city: '株洲',
				py: 'zhuzhou'
			}, {
				city: '贵阳',
				py: 'guiyang'
			}, {
				city: '安顺',
				py: 'anshun'
			}, {
				city: '毕节',
				py: 'bijie'
			}, {
				city: '六盘水',
				py: 'liupanshui'
			}, {
				city: '黔东南',
				py: 'qiandongnan'
			}, {
				city: '黔南',
				py: 'qiannan'
			}, {
				city: '黔西南',
				py: 'qianxinan'
			}, {
				city: '铜仁',
				py: 'tongren'
			}, {
				city: '遵义',
				py: 'zunyi'
			}, {
				city: '海口',
				py: 'haikou'
			}, {
				city: '三亚',
				py: 'sanya'
			}, {
				city: '白沙',
				py: 'baisha'
			}, {
				city: '保亭',
				py: 'baoting'
			}, {
				city: '昌江',
				py: 'changjiang'
			}, {
				city: '澄迈县',
				py: 'chengmaixian'
			}, {
				city: '定安县',
				py: 'dinganxian'
			}, {
				city: '东方',
				py: 'dongfang'
			}, {
				city: '乐东',
				py: 'ledong'
			}, {
				city: '临高县',
				py: 'lingaoxian'
			}, {
				city: '陵水',
				py: 'lingshui'
			}, {
				city: '琼海',
				py: 'qionghai'
			}, {
				city: '琼中',
				py: 'qiongzhong'
			}, {
				city: '屯昌县',
				py: 'tunchangxian'
			}, {
				city: '万宁',
				py: 'wanning'
			}, {
				city: '文昌',
				py: 'wenchang'
			}, {
				city: '五指山',
				py: 'wuzhishan'
			}, {
				city: '儋州',
				py: 'danzhou'
			}, {
				city: '南京',
				py: 'nanjing'
			}, {
				city: '北京',
				py: 'beijing'
			}, {
				city: '上海',
				py: 'shanghai'
			}, {
				city: '重庆',
				py: 'chongqing'
			}, {
				city: '杭州',
				py: 'hangzhou'
			}, {
				city: '苏州',
				py: 'shuzhou'
			}, {
				city: '天津',
				py: 'tianjin'
			}, {
				city: '成都',
				py: 'chengdu'
			}, {
				city: '南昌',
				py: 'nanchang'
			}, {
				city: '青岛',
				py: 'qingdao'
			}, {
				city: '西安',
				py: 'xian'
			}, {
				city: '合肥',
				py: 'hefei'
			}, {
				city: '西藏',
				py: 'xizang'
			}, {
				city: '内蒙古',
				py: 'neimenggu'
			}, {
				city: '安庆',
				py: 'anqing'
			}, {
				city: '阿泰勒',
				py: 'ataile'
			}, {
				city: '安康',
				py: 'ankang'
			}, {
				city: '阿克苏',
				py: 'akesu'
			}, {
				city: '包头',
				py: 'baotou'
			}, {
				city: '长治',
				py: 'changzhi'
			}, {
				city: '长春',
				py: 'changchun'
			}, {
				city: '常州',
				py: 'changzhou'
			}, {
				city: '昌都',
				py: 'changdu'
			}, {
				city: '朝阳',
				py: 'chaoyang'
			}, {
				city: '长白山',
				py: 'changbaishan'
			}, {
				city: '赤峰',
				py: 'chifeng'
			}, {
				city: '大同',
				py: 'datong'
			}, {
				city: '大连',
				py: 'dalian'
			}, {
				city: '达县',
				py: 'daxian'
			}, {
				city: '东营',
				py: 'dongying'
			}, {
				city: '大庆',
				py: 'daqing'
			}, {
				city: '丹东',
				py: 'dandong'
			}, {
				city: '敦煌',
				py: 'dunhuang'
			}, {
				city: '鄂尔多斯',
				py: 'eerduosi'
			}, {
				city: '恩施',
				py: 'enshi'
			}, {
				city: '阜阳',
				py: 'fuyang'
			}, {
				city: '广元',
				py: 'guangyuan'
			}, {
				city: '格尔木',
				py: 'geermu'
			}, {
				city: '拱北',
				py: 'gongbei'
			}, {
				city: '呼和浩特',
				py: 'huhehaote'
			}, {
				city: '哈密',
				py: 'hami'
			}, {
				city: '黑河',
				py: 'heihe'
			}, {
				city: '海拉尔',
				py: 'hailaer'
			}, {
				city: '哈尔滨',
				py: 'haerbin'
			}, {
				city: '黄山',
				py: 'huangshan'
			}, {
				city: '邯郸',
				py: 'handan'
			}, {
				city: '汉中',
				py: 'hanzhong'
			}, {
				city: '和田',
				py: 'hetian'
			}, {
				city: '晋江',
				py: 'jinjiang'
			}, {
				city: '锦州',
				py: 'jinzhou'
			}, {
				city: '景德镇',
				py: 'jingdezhen'
			}, {
				city: '嘉峪关',
				py: 'jiayuguan'
			}, {
				city: '井冈山',
				py: 'jinggangshan'
			}, {
				city: '济宁',
				py: 'jining'
			}, {
				city: '九江',
				py: 'jiujiang'
			}, {
				city: '佳木斯',
				py: 'jiamusi'
			}, {
				city: '济南',
				py: 'jinan'
			}, {
				city: '喀什',
				py: 'kashi'
			}, {
				city: '康定',
				py: 'kangding'
			}, {
				city: '克拉玛依',
				py: 'kelamayi'
			}, {
				city: '库尔勒',
				py: 'kuerle'
			}, {
				city: '库车',
				py: 'kuche'
			}, {
				city: '兰州',
				py: 'lanzhou'
			}, {
				city: '洛阳',
				py: 'luoyang'
			}, {
				city: '林芝',
				py: 'linzhi'
			}, {
				city: '泸州',
				py: 'luzhou'
			}, {
				city: '连云港',
				py: 'lianyungang'
			}, {
				city: '黎平',
				py: 'liping'
			}, {
				city: '连成',
				py: 'liancheng'
			}, {
				city: '拉萨',
				py: 'lasa'
			}, {
				city: '临沂',
				py: 'linyi'
			}, {
				city: '芒市',
				py: 'mangshi'
			}, {
				city: '牡丹江',
				py: 'mudanjiang'
			}, {
				city: '满洲里',
				py: 'manzhouli'
			}, {
				city: '绵阳',
				py: 'mianyang'
			}, {
				city: '梅县',
				py: 'meixian'
			}, {
				city: '漠河',
				py: 'mohe'
			}, {
				city: '南充',
				py: 'nanchong'
			}, {
				city: '南阳',
				py: 'nanyang'
			}, {
				city: '南通',
				py: 'nantong'
			}, {
				city: '那拉提',
				py: 'nalati'
			}, {
				city: '宁波',
				py: 'ningbo'
			}, {
				city: '攀枝花',
				py: 'panzhihua'
			}, {
				city: '衢州',
				py: 'quzhou'
			}, {
				city: '秦皇岛',
				py: 'qinhuangdao'
			}, {
				city: '庆阳',
				py: 'qingyang'
			}, {
				city: '齐齐哈尔',
				py: 'qiqihaer'
			}, {
				city: '石家庄',
				py: 'shijiazhuang'
			}, {
				city: '沈阳',
				py: 'shenyang'
			}, {
				city: '思茅',
				py: 'simao'
			}, {
				city: '塔城',
				py: 'tacheng'
			}, {
				city: '腾冲',
				py: 'tengchong'
			}, {
				city: '台州',
				py: 'taizhou'
			}, {
				city: '通辽',
				py: 'tongliao'
			}, {
				city: '太原',
				py: 'taiyuan'
			}, {
				city: '威海',
				py: 'weihai'
			}, {
				city: '无锡',
				py: 'wuxi'
			}, {
				city: '潍坊',
				py: 'weifang'
			}, {
				city: '武夷山',
				py: 'wuyishan'
			}, {
				city: '乌兰浩特',
				py: 'wulanhaote'
			}, {
				city: '温州',
				py: 'wenzhou'
			}, {
				city: '乌鲁木齐',
				py: 'wulumuqi'
			}, {
				city: '万州',
				py: 'wanzhou'
			}, {
				city: '乌海',
				py: 'wuhai'
			}, {
				city: '兴义',
				py: 'xingyi'
			}, {
				city: '西昌',
				py: 'xichang'
			}, {
				city: '襄樊',
				py: 'xiangfan'
			}, {
				city: '西宁',
				py: 'xining'
			}, {
				city: '锡林浩特',
				py: 'xilinhaote'
			}, {
				city: '徐州',
				py: 'xuzhou'
			}, {
				city: '义乌',
				py: 'yiwu'
			}, {
				city: '榆林',
				py: 'yulin'
			}, {
				city: '延安',
				py: 'yanan'
			}, {
				city: '运城',
				py: 'yuncheng'
			}, {
				city: '烟台',
				py: 'yantai'
			}, {
				city: '银川',
				py: 'yinchuan'
			}, {
				city: '宜昌',
				py: 'yichang'
			}, {
				city: '宜宾',
				py: 'yibin'
			}, {
				city: '盐城',
				py: 'yancheng'
			}, {
				city: '延吉',
				py: 'yanji'
			}, {
				city: '玉树',
				py: 'yushu'
			}, {
				city: '伊宁',
				py: 'yining'
			}, {
				city: '越南河内',
				py: 'yuenanhenei'
			}, {
				city: '香港',
				py: 'xianggang'
			}, {
				city: '珠海',
				py: 'zhuhai'
			}, {
				city: '舟山',
				py: 'zhoushan'
			}, {
				city: '郑州',
				py: 'zhengzhou'
			}, {
				city: '中卫',
				py: 'zhongwei'
			}, {
				city: '芷江',
				py: 'zhijiang'
			}, {
				city: '校椅',
				py: 'xiaoyi'
			}, {
				city: '电白',
				py: 'dianbai'
			}, {
				city: '峦城',
				py: 'luancheng'
			}, {
				city: '桐木',
				py: 'tongmu'
			}, {
				city: '大垌',
				py: 'datong'
			}, {
				city: '石塘',
				py: 'shitang'
			}, {
				city: '荔波',
				py: 'libo'
			}, {
				city: '兴业高峰',
				py: 'xingyegaofeng'
			}, {
				city: '岭顶',
				py: 'lingding'
			}],
			hostCitys: []
		}
	},
	template: `
	<transition enter-active-class="animated slideInRight" leave-active-class="animated slideOutRight">
		<section class="cityChoiceBox" id="cityChoiceBox" v-if='boxShow'>
			<article class="cityChoice-top transit" v-bind:class='{focus:isCancel}'>
				<transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutLeft">
					<span class="fa fa-angle-left" v-if='!isCancel' v-on:click='cityFun'></span>
				</transition>
				<input type="text" class="search-input" placeholder="中文/拼音/首写字母" v-model.trim='ssval' v-on:focus='search' />
				<transition enter-active-class="animated fadeInRight" leave-active-class="animated fadeOutRight">
					<i v-if='isCancel' v-on:click='isCancel=false' class="cancel">取消</i>
				</transition>
			</article>
			<article class="city-Box" v-show='!isCancel'>
				<div class="city-sidaber" id="city-sidaber" v-show='!isCancel'>
					<p v-for="(sidaber,index) in sidabers" v-on:touchstart='mousedownFun(index)' v-on:touchend='mouseupFun(index)' v-text='sidaber'></p>
				</div>
				<div class="host-city">
					<h3>热门城市</h3>
					<span v-for='(item,index) in hostCitys' v-text='item.city' v-on:click='cityactive(index,hostCitys)'></span>
				</div>
				<div class="city-content">
					<h3>A</h3>
					<p v-for='(item,index) in cityA'><i v-on:click='cityactive(index,cityA)'>{{item.city}}</i></p>
					<h3>B</h3>
					<p v-for='(item,index) in cityB'><i v-on:click='cityactive(index,cityB)'>{{item.city}}</i></p>
					<h3>C</h3>
					<p v-for='(item,index) in cityC'><i v-on:click='cityactive(index,cityC)'>{{item.city}}</i></p>
					<h3>D</h3>
					<p v-for='(item,index) in cityD'><i v-on:click='cityactive(index,cityD)'>{{item.city}}</i></p>
					<h3>E</h3>
					<p v-for='(item,index) in cityE'><i v-on:click='cityactive(index,cityE)'>{{item.city}}</i></p>
					<h3>F</h3>
					<p v-for='(item,index) in cityF'><i v-on:click='cityactive(index,cityF)'>{{item.city}}</i></p>
					<h3>G</h3>
					<p v-for='(item,index) in cityG'><i v-on:click='cityactive(index,cityG)'>{{item.city}}</i></p>
					<h3>H</h3>
					<p v-for='(item,index) in cityH'><i v-on:click='cityactive(index,cityH)'>{{item.city}}</i></p>
					<h3>J</h3>
					<p v-for='(item,index) in cityJ'><i v-on:click='cityactive(index,cityJ)'>{{item.city}}</i></p>
					<h3>K</h3>
					<p v-for='(item,index) in cityK'><i v-on:click='cityactive(index,cityK)'>{{item.city}}</i></p>
					<h3>L</h3>
					<p v-for='(item,index) in cityL'><i v-on:click='cityactive(index,cityL)'>{{item.city}}</i></p>
					<h3>M</h3>
					<p v-for='(item,index) in cityM'><i v-on:click='cityactive(index,cityM)'>{{item.city}}</i></p>
					<h3>N</h3>
					<p v-for='(item,index) in cityN'><i v-on:click='cityactive(index,cityN)'>{{item.city}}</i></p>
					<h3>P</h3>
					<p v-for='(item,index) in cityP'><i v-on:click='cityactive(index,cityP)'>{{item.city}}</i></p>
					<h3>Q</h3>
					<p v-for='(item,index) in cityQ'><i v-on:click='cityactive(index,cityQ)'>{{item.city}}</i></p>
					<h3>R</h3>
					<p v-for='(item,index) in cityR'><i v-on:click='cityactive(index,cityR)'>{{item.city}}</i></p>
					<h3>S</h3>
					<p v-for='(item,index) in cityS'><i v-on:click='cityactive(index,cityS)'>{{item.city}}</i></p>
					<h3>T</h3>
					<p v-for='(item,index) in cityT'><i v-on:click='cityactive(index,cityT)'>{{item.city}}</i></p>
					<h3>W</h3>
					<p v-for='(item,index) in cityW'><i v-on:click='cityactive(index,cityW)'>{{item.city}}</i></p>
					<h3>X</h3>
					<p v-for='(item,index) in cityX'><i v-on:click='cityactive(index,cityX)'>{{item.city}}</i></p>
					<h3>Y</h3>
					<p v-for='(item,index) in cityY'><i v-on:click='cityactive(index,cityY)'>{{item.city}}</i></p>
					<h3>Z</h3>
					<p v-for='(item,index) in cityZ'><i v-on:click='cityactive(index,cityZ)'>{{item.city}}</i></p>
				</div>
				<div v-show='zimShow' class="zimShow" v-text='zimText'></div>
			</article>
			<article class="search-box" id="search-box" v-show='isCancel'>
				<p class="sousuo" v-for='(item,index) in sousuos' v-on:click='cityactive(index,sousuos)'>{{item.city}}</p>
			</article>
		</section>
	</transition>
	`,
	methods: {
		cityFun: function() {
			this.boxShow = !this.boxShow;
		},
		search: function() {
			this.isCancel = true;
			document.documentElement.scrollTop = 0;
		},
		hostCityss: function() {
			var j = 0;
			for (var i = 0; i < 15; i++) {
				Vue.set(this.hostCitys, j, this.citys[i]);
				j++
			}
		},
		cityactive: function(index, cityss) {
			this.boxShow = !this.boxShow;
			this.zimShow = false;
			this.$emit("tochildevent", cityss[index].city)
		},
		mousedownFun: function(index) {
			this.zimShow = !this.zimShow;
			this.zimText = this.sidabers[index]
		},
		mouseupFun: function(index) {
			this.zimShow = !this.zimShow;
			var cityChoiceBox = document.getElementById('cityChoiceBox');
			var h3 = cityChoiceBox.getElementsByTagName('h3');
			var timer = null;

			function scrT(iTarget) {
				clearInterval(timer);
				document.ontouchstart = function() {
					clearInterval(timer);
				}
				timer = setInterval(function() {
					var scrollT = document.documentElement.scrollTop || document.body.scrollTop,
						speed = 0;
					speed = Math.floor((iTarget - scrollT) / 5);
					if (scrollT == iTarget) {
						clearInterval(timer);
					} else {
						document.documentElement.scrollTop = scrollT + speed;
						document.body.scrollTop = scrollT + speed;
					}
				}, 30);
			}
			scrT(h3[index].offsetTop - 50);
		}
	},
	computed: {
		cityA: function() {
			return this.citys.filter(function(item) {
				return item.py.substr(0, 1) == 'a';
			});
		},
		cityB: function() {
			return this.citys.filter(function(item) {
				return item.py.substr(0, 1) == 'b';
			});
		},
		cityC: function() {
			return this.citys.filter(function(item) {
				return item.py.substr(0, 1) == 'c';
			});
		},
		cityD: function() {
			return this.citys.filter(function(item) {
				return item.py.substr(0, 1) == 'd';
			});
		},
		cityE: function() {
			return this.citys.filter(function(item) {
				return item.py.substr(0, 1) == 'e';
			});
		},
		cityF: function() {
			return this.citys.filter(function(item) {
				return item.py.substr(0, 1) == 'f';
			});
		},
		cityG: function() {
			return this.citys.filter(function(item) {
				return item.py.substr(0, 1) == 'g';
			});
		},
		cityH: function() {
			return this.citys.filter(function(item) {
				return item.py.substr(0, 1) == 'h';
			});
		},
		cityJ: function() {
			return this.citys.filter(function(item) {
				return item.py.substr(0, 1) == 'j';
			});
		},
		cityK: function() {
			return this.citys.filter(function(item) {
				return item.py.substr(0, 1) == 'k';
			});
		},
		cityL: function() {
			return this.citys.filter(function(item) {
				return item.py.substr(0, 1) == 'l';
			});
		},
		cityM: function() {
			return this.citys.filter(function(item) {
				return item.py.substr(0, 1) == 'm';
			});
		},
		cityN: function() {
			return this.citys.filter(function(item) {
				return item.py.substr(0, 1) == 'n';
			});
		},
		cityP: function() {
			return this.citys.filter(function(item) {
				return item.py.substr(0, 1) == 'p';
			});
		},
		cityQ: function() {
			return this.citys.filter(function(item) {
				return item.py.substr(0, 1) == 'q';
			});
		},
		cityR: function() {
			return this.citys.filter(function(item) {
				return item.py.substr(0, 1) == 'r';
			});
		},
		cityS: function() {
			return this.citys.filter(function(item) {
				return item.py.substr(0, 1) == 's';
			});
		},
		cityT: function() {
			return this.citys.filter(function(item) {
				return item.py.substr(0, 1) == 't';
			});
		},
		cityW: function() {
			return this.citys.filter(function(item) {
				return item.py.substr(0, 1) == 'w';
			});
		},
		cityX: function() {
			return this.citys.filter(function(item) {
				return item.py.substr(0, 1) == 'x';
			});
		},
		cityY: function() {
			return this.citys.filter(function(item) {
				return item.py.substr(0, 1) == 'y';
			});
		},
		cityZ: function() {
			return this.citys.filter(function(item) {
				return item.py.substr(0, 1) == 'z';
			});
		},
		sousuos: function() {
			var ssval = this.ssval;
			return this.citys.filter(function(item) {
				return item.py.indexOf(ssval) != -1 || item.city.indexOf(ssval) != -1;
			});
		}
	},
	mounted: function() {
		this.hostCityss();
	}
})
